<template>
  <a-form-model layout="inline" :model="search" class="comm-search-f" :style="`width: calc(100% - ${sideMenuWidth} - 33px)`">
    <!-- 筛选条件与查询 -->
    <!-- 航空公司 -->
    <a-form-model-item v-show="checkedFilter.includes(0)" label="">
      <a-select
        v-model="search.airline"
        show-arrow
        mode="multiple"
        :max-tag-count="1"
        style="minWidth: 100%"
        placeholder="航空公司"
        allow-clear
        @change="changeAirline"
      >
        <a-icon slot="suffixIcon" :component="require('@/assets/icon/arrow-down-bold.svg')" />
        <a-select-option v-for="selectItem in ftmAirlineList" :key="selectItem.id" :value="selectItem.name">
          {{ selectItem.name }}
        </a-select-option>
      </a-select>
    </a-form-model-item>

    <!-- 机队 -->
    <a-form-model-item v-show="checkedFilter.includes(2)" label="">
      <a-select
        v-model="search.fleet"
        show-arrow
        :data-source="ftmFleetListFilter"
        style="minWidth: 100%"
        placeholder="机队"
        mode="multiple"
        :max-tag-count="1"
        allow-clear
        @change="changeFleet"
      >

        <a-icon slot="suffixIcon" :component="require('@/assets/icon/arrow-down-bold.svg')" />
        <a-select-option v-for="selectItem in ftmFleetList" :key="selectItem.id" :value="selectItem.name">
          <a-tooltip placement="left" :destroy-tooltip-on-hide="true" :mouse-enter-delay="0.2">
            <template slot="title">
              {{ selectItem.name }} ({{ selectItem.num }})
            </template>
            {{ selectItem.name }} ({{ selectItem.num }})
          </a-tooltip>

        </a-select-option>
      </a-select>
    </a-form-model-item>

    <!-- 机号 -->
    <a-form-model-item v-show="checkedFilter.includes(3)" label="">
      <tailNumber
        v-model="search.tailnumber"

        :data-source="ftmAirplaneListFilter"
        value-key="tailnumber"
        name-key="tailnumber"
        width="100%"
      />
    </a-form-model-item>
    <!-- 事件类型 -->
    <a-form-model-item v-show="checkedFilter.includes(1)" label="">
      <eventList
        v-model="search.eventType"
        :mul="true"
        width="100%"
        placeholder="事件类型"
        :show-fde-sub="true"
        :is-etops.sync="search.isEtops"
        :is-ground.sync="search.isGround"
      />
    </a-form-model-item>

    <!-- ATA -->
    <a-form-model-item v-show="checkedFilter.includes(4)" label="">
      <ataList v-model="search.ata" width="100%" />
    </a-form-model-item>

    <!-- priority -->
    <a-form-model-item v-show="checkedFilter.includes(5)" label="">
      <a-select
        v-model="search.priority"
        show-arrow
        style="minWidth: 100%"
        placeholder="优先级"
        mode="multiple"
        :max-tag-count="1"
        allow-clear
      >
        <a-icon slot="suffixIcon" :component="require('@/assets/icon/arrow-down-bold.svg')" />
        <a-select-option
          v-for="selectItem in [...[...priorityList].reverse(), {
            value: 0,
            name: '无',
          }]"
          :key="selectItem.id"
          :value="selectItem.value"
        >
          {{ selectItem.name }}
        </a-select-option>
      </a-select>
    </a-form-model-item>

    <!-- 起飞机场 -->
    <a-form-model-item v-show="checkedFilter.includes(6)" label="">
      <airportList
        v-model="search.dep"
        :data-source="depListFilter"
        type="dep"
        width="100%"
        :show-num="true"
      />
    </a-form-model-item>

    <!-- 到达机场 -->
    <a-form-model-item v-show="checkedFilter.includes(7)" label="">
      <airportList
        v-model="search.arr"
        :data-source="arrListFilter"
        type="arr"
        width="100%"
        :show-num="true"
      />
    </a-form-model-item>
    <a-form-model-item class="fs-btn-box">

      <a-button type="primary" ghost :loading="loading" @click="resetHandler">
        重置
      </a-button>

      <a-dropdown
        :visible="checkedFilterShow"
        :trigger="['click']"
        placement="bottomCenter"
        @visibleChange="handleClickChange"
      >
        <a-icon :component="require('@/assets/icon/Fleet_Status_Filter_Setting.svg')" class="cu-poin ml-16" />
        <div slot="overlay" class="c-dropdown-box">
          <div class="c-dropdown-box-title">选择显示的筛选条件</div>
          <a-checkbox-group v-model="checkedFilterTmp">
            <a-row class="checked-filter-box">
              <a-col v-for="item in filterList" :key="item.label" class="notice-item-e" :span="24">
                <a-checkbox :value="item.value">
                  {{ item.label }}
                </a-checkbox>
              </a-col>
            </a-row>
          </a-checkbox-group>

          <div class="d-flex jc-center">
            <a-button class="mr-4" size="small" @click="handleClickChange(false)">取消</a-button>
            <a-button class="ml-4" size="small" type="primary" @click="filterChangeSave">保存</a-button>
          </div>
        </div>
      </a-dropdown>
      <!-- <a-popover
        title="筛选条件"
        :visible="checkedFilterShow"
        trigger="click"
        placement="bottom"
        @visibleChange="handleClickChange"
      >
        <template slot="content">

          <a-divider class="mt-12 mb-12" />
          <div class="d-flex jc-between">
            <a-button size="small" @click="handleClickChange(false)">取消</a-button>
            <a-button size="small" type="primary" @click="filterChangeSave">保存</a-button>
          </div>
        </template>

      </a-popover> -->
    </a-form-model-item>

  </a-form-model>
</template>

<script>
import { mapState, mapGetters, mapActions } from 'vuex';
import { priorityList } from '@/pages/common/constant.js';
import eventList from '@/pages/components/eventList';
import airportList from '@/pages/components/airportList';
import ataList from '@/pages/components/ataList';
import tailNumber from '@/pages/components/tailNumber';
import { debounce } from '@/utils/util.js';
export default {
  components: {
    eventList,
    airportList,
    ataList,
    tailNumber
  },
  props: {
    selectedRowKeys: {
      type: Array,
      default: () => []
    },
    loading: {
      type: Boolean,
      default: false
    },
    exportHandler: {
      type: Function,
      default() {
        return function() {};
      }
    }
  },
  data() {
    return {
      eventTypeT: [],
      search: {},
      checkedFilterShow: false,
      checkedFilterTmp: [],
      priorityList,
      checkedFilter: [0, 1, 2, 3, 4, 5, 6, 7, 8],
      filterList: Object.freeze([
        {
          value: 0,
          label: '航空公司'
        },
        {
          value: 1,
          label: '事件类型'
        },
        {
          value: 2,
          label: '机队'
        },
        {
          value: 3,
          label: '机号'
        },
        {
          value: 4,
          label: 'ATA'
        },
        {
          value: 5,
          label: '优先级'
        },
        {
          value: 6,
          label: '起飞机场'
        },
        {
          value: 7,
          label: '到达机场'
        }
      ])
    };
  },
  computed: {
    ...mapState('fraMonitoring', [
      'ftmAirlineList',
      'ftmFleetList',
      'depListFilter',
      'arrListFilter',
      'ftmAirplaneListFilter',
      'ftmFleetListFilter'
    ]),
    ...mapGetters('setting', ['sideMenuWidth'])
  },
  watch: {
    'search': {
      handler(nv) {
        // if (this.search?.eventType === 'MMSG' || this.search?.eventType?.includes('MMSG')) {
        //   const mmsgType = this.search.mmsgType ?? 0;
        //   this.$set(this.search, 'mmsgType', mmsgType);
        // }
        this.debounceGet();
      },
      deep: true
    }
  },
  mounted() {
    this.checkedFilter = JSON.parse(localStorage.getItem('fmSF') ?? JSON.stringify([...this.checkedFilter]));
  },
  methods: {
    ...mapActions('fraMonitoring', [
      'getFtmFleetFilter',
      'getFtmAirportListFilter',
      'getFtmAirplaneListFilter'
    ]),
    debounceGet: debounce(function() { this.searchHandler(); }, 720),
    // 筛选弹框
    handleClickChange(visible) {
      if (visible) {
        this.checkedFilterTmp = [...this.checkedFilter];
      }
      this.checkedFilterShow = visible;
    },
    changeAirline() {
      const params = {
        airline: this.search.airline || undefined,
        fleet: this.search.fleet || undefined
      };
      this.getFtmFleetFilter(params);
      // this.getFtmAirportListFilter(params);
      // 机号
      this.getFtmAirplaneListFilter(params);
    },

    changeFleet(v) {
      const params = {
        airline: this.search.airline || undefined,
        fleet: this.search.fleet || undefined
      };
      // this.getFtmFleetFilter({ airline: v[0] });
      // this.getFtmAirportListFilter({ airline: v[0] });
      // 机号
      this.getFtmAirplaneListFilter(params);
    },
    // 保存选择的筛选条件
    filterChangeSave() {
      this.checkedFilterShow = false;
      this.checkedFilter = [...this.checkedFilterTmp];
      localStorage.setItem('fmSF', JSON.stringify([...this.checkedFilter]));
    },
    resetHandler() {
      this.search = {};
      this.changeAirline();
    },
    searchHandler() {
      this.$emit('searchHandler', { current: 1 });
    }
  }
};
</script>

<style lang="less">
.checked-filter-box {
  width: 128px;
}
.fs-btn-box{
  flex: 1;
  .ant-btn{
    vertical-align: bottom;
  }
}
</style>
